<template>
    <view class="pdf-container">
        <view class="pdf-content" :style="{ height: `${webViewHeight}px` }">
            <web-view :src="pdfUrl" v-if="pdfUrl" :style="{ height: `${webViewHeight}px` }" />
            <view class="pdf-empty" v-else>
                <u-empty text="加载中..." mode="data"></u-empty>
            </view>

            <canvas id="pdfCanvas" style="width: 100%; height: 600px;"></canvas>
        </view>
        <!-- <view class="pdf-btns" id="pdf-btns">
            <u-button type="warning" :disabled="btnDisabled" @click="againGenerate">重新生成</u-button>
            <u-button type="primary" :disabled="btnDisabled" @click="downloadPdf">下载</u-button>
        </view> -->
    </view>
</template>

<script>
import { orderPdfPreview, orderPdfDownload, getService } from "@/utils/api";
import { saveAs } from "file-saver";
export default {
    data() {
        return {
            optionsQueryParams: {},
            pdfJsViewBaseURL: "/static/hybrid/html/web/viewer.html",
            pdfUrl: "",
            webViewHeight: 0,
            objectURLs: {
                pdfViewURL: "",
            },
            orderDetail: {},
            btnDisabled: false,
        };
    },
    async onLoad(options) {
        Object.keys(options).forEach((key) => {
            this.$set(this.optionsQueryParams, key, options[key]);
        });
        if (!options.id) {
            this.btnDisabled = true;
            return this.$u.toast("缺少单据标识");
        }
        await this.getOrderDetail();
        await this.getOrderPdfPreview();
    },
    mounted() {
        this.getElementSize();
    },
    beforeDestroy() {
        Object.keys(this.objectURLs).forEach((key) => {
            this.objectURLs[key] &&
                window.URL.revokeObjectURL(this.objectURLs[key]);
        });
    },
    methods: {
        async getOrderDetail() {
            try {
                let res = await getService(this.optionsQueryParams.id, {
                    custom: { catch: true },
                });
                this.orderDetail = res.data;
            } catch (error) {
                this.$u.toast("获取单据详情失败");
            }
        },
        async getOrderPdfPreview() {
            try {
                let pdfBlob = await orderPdfPreview({
                    params: { id: this.optionsQueryParams.id },
                    responseType: "arraybuffer",
                    custom: { catch: true },
                });
                let blob = new Blob([pdfBlob], {
                    type: "application/pdf;charset=UTF-8",
                });
                this.objectURLs.pdfViewURL = window.URL.createObjectURL(blob);
                this.pdfUrl = `${this.pdfJsViewBaseURL
                    }?file=${encodeURIComponent(this.objectURLs.pdfViewURL)}`;
            } catch (error) {
                this.$u.toast("PDF预览失败");
            }
        },

        async getElementSize() {
            let systemInfo = await uni.getSystemInfo();
            this.webViewHeight = systemInfo.windowHeight
        },
        async againGenerate() {
            this.$u.toast("重新生成中,请等待");
            this.btnDisabled = true;
            this.objectURLs.pdfViewURL &&
                window.URL.revokeObjectURL(this.objectURLs.pdfViewURL);
            await this.getOrderPdfPreview();
            this.btnDisabled = false;
        },
        async downloadPdf() {
            try {
                this.$u.toast("下载中,请等待");
                this.btnDisabled = true;
                let res = await orderPdfDownload({
                    params: { id: this.optionsQueryParams.id },
                    responseType: "arraybuffer",
                    custom: { catch: true },
                });
                let blob = new Blob([res], {
                    type: "application/pdf;charset=UTF-8",
                });
                let fileName = `${this.orderDetail.customerName}_${this.orderDetail.serviceNo}.pdf`;
                saveAs(blob, fileName);
                // let aLink = document.createElement("a");
                // let aLinkHref = window.URL.createObjectURL(blob);
                // aLink.href = aLinkHref;
                // aLink.download = `${this.orderDetail.customerName}_${this.orderDetail.serviceNo}.pdf`;
                // aLink.click();
                // aLink.remove();
                // window.URL.revokeObjectURL(aLinkHref);
                this.btnDisabled = false;
            } catch (error) {
                this.$u.toast("下载失败");
                this.btnDisabled = false;
            }
        },
    },
};
</script>

<style lang="scss" scoped>
:root {
    --window-topc: 20rpx;
}

uni-page-body {
    width: 100%;
    height: 100%;
    background: #f4f4f4;
}

.pdf-container {
    width: 100%;
    height: 100%;
}

.pdf-content {
    overflow: auto;
}

.pdf-btns {
    display: flex;
    background-color: #fff;
    padding: 20rpx;
    box-shadow: 0 -10px 15px -5px rgba(0, 0, 0, 0.1);
    z-index: 100;
    position: relative;

    .u-button {
        width: 45%;
    }
}

.pdf-view {
    flex: 1;
    overflow: auto;
}

.pdf-empty {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>